{% extends "part/part_app_base.html" %}
{% load static %}
{% load i18n %}
{% load inventree_extras %}

{% block sidebar %}
{% include 'part/category_sidebar.html' %}
{% endblock %}

{% block breadcrumb_tree %}
<div id="breadcrumb-tree"></div>
{% endblock breadcrumb_tree %}

{% block heading %}
{% if category %}
{% trans "Part Category" %}:
{% settings_value "PART_CATEGORY_DEFAULT_ICON" as default_icon %}
{% if category.icon or default_icon %}
<span class="{{ category.icon|default:default_icon }}"></span>
{% endif %}
{{ category.name }}
{% else %}
{% trans "Parts" %}
{% endif %}
{% endblock %}

{% block actions %}
{% if category and user.is_staff and roles.part_category.change %}
{% url 'admin:part_partcategory_change' category.pk as url %}
{% include "admin_button.html" with url=url %}
{% endif %}
{% settings_value "STOCKTAKE_ENABLE" as stocktake_enable %}
{% if stocktake_enable and roles.stocktake.add %}
<button type='button' class='btn btn-outline-secondary' id='category-stocktake' title='{% trans "Perform stocktake for this part category" %}'>
    <span class='fas fa-clipboard-check'></span>
</button>
{% endif %}
{% if category %}
{% if starred_directly %}
<button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "You are subscribed to notifications for this category" %}'>
    <span id='category-star-icon' class='fas fa-bell icon-green'></span>
</button>
{% elif starred %}
<button type='button' class='btn btn-outline-secondary' title='{% trans "You are subscribed to notifications for this category" %}' disabled='true'>
    <span class='fas fa-bell icon-green'></span>
</button>
{% else %}
<button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "Subscribe to notifications for this category" %}'>
    <span id='category-star-icon' class='fa fa-bell-slash'/>
</button>
{% endif %}
{% if roles.part_category.change or roles.part_category.delete %}
<div class='btn-group' role='group'>
    <button id='category-options' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown' title='{% trans "Category Actions" %}'>
        <span class='fas fa-tools'></span> <span class='caret'></span>
    </button>
    <ul class='dropdown-menu'>
        {% if roles.part_category.change %}
        <li><a class='dropdown-item' href='#' id='cat-edit' title='{% trans "Edit category" %}'>
            <span class='fas fa-edit icon-green'></span> {% trans "Edit Category" %}
        </a></li>
        {% endif %}
        {% if roles.part_category.delete %}
        <li><a class='dropdown-item' href='#' id='cat-delete' title='{% trans "Delete category" %}'>
            <span class='fas fa-trash-alt icon-red'></span> {% trans "Delete Category" %}
        </a></li>
        {% endif %}
    </ul>
</div>
{% endif %}
{% endif %}
{% endblock %}

{% block details_left %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    {% if category %}
    {% if category.description %}
    <tr>
        <td><span class='fas fa-info-circle'></span></td>
        <td>{% trans "Description" %}</td>
        <td>{{ category.description }}</td>
    </tr>
    {% endif %}
    <tr>
        <td><span class='fas fa-sitemap'></span></td>
        <td>{% trans "Category Path" %}</td>
        <td>{{ category.pathstring }}</td>
    </tr>
    {% if category.default_keywords %}
    <tr>
        <td><span class='fas fa-key'></span></td>
        <td>{% trans "Keywords" %}</td>
        <td>{{ category.default_keywords }}</td>
    </tr>
    {% endif %}
    {% else %}
    <tr>
        <td><span class='fas fa-sitemap'></span></td>
        <td>{% trans "Category Path" %}</td>
        <td><em>{% trans "Top level part category" %}</em></td>
    </tr>
    {% endif %}
</table>
{% endblock details_left %}

{% block details_right %}

{% if category %}
<table class='table table-condensed table-striped'>
    <col width='25'>
    {% if category.default_location %}
    <tr>
        <td><span class='fas fa-map-marker-alt'></span></td>
        <td>{% trans "Default Location" %}</td>
        <td><a href="{% url 'stock-location-detail' category.default_location.pk %}">{{ category.default_location.pathstring }}</a></td>
    </tr>
    {% endif %}
    <tr>
        <td><span class='fas fa-sitemap'></span></td>
        <td>{% trans "Subcategories" %}</td>
        <td>{{ category.children.count }}</td>
    </tr>
    <tr>
        <td><span class='fas fa-shapes'></span></td>
        <td>{% trans "Parts (Including subcategories)" %}</td>
        <td>{{ category.partcount }}</td>
    </tr>
</table>
{% else %}
<table class='table table-striped table-condensed'>
    <col width='25'>
    <tr>
        <td><span class='fas fa-sitemap'></span></td>
        <td>{% trans "Part Categories" %}</td>
        <td>{{ category_count }}</td>
    </tr>
    <tr>
        <td><span class='fas fa-shapes'></span></td>
        <td>{% trans "Parts" %}</td>
        <td>{{ part_count }}</td>
    </tr>
</table>
{% endif %}
{% endblock details_right %}

{% block page_content %}

{% if messages %}
  {% for message in messages %}
    <div class='{{ message.tags }}'>
        {{ message|safe }}
    </div>
  {% endfor %}
{% endif %}

<div class='panel panel-hidden' id='panel-parts'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Parts" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.part.add %}
                <button type='button' class='btn btn-success' id='part-create' title='{% trans "Create new part" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Part" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div id='part-button-toolbar'>
        <div class='btn-group' role='group'>
            <div class='btn-group' role='group'>
                <button id='part-options' class='btn btn-primary dropdown-toggle' type='button' data-bs-toggle="dropdown">
                    <span class='fas fa-tools' title='{% trans "Options" %}'></span>
                </button>
                <ul class='dropdown-menu'>
                    {% if roles.part.change %}
                    <li><a class='dropdown-item' href='#' id='multi-part-category' title='{% trans "Set category" %}'>
                        <span class='fas fa-sitemap'></span> {% trans "Set Category" %}
                    </a></li>
                    {% endif %}
                    <li><a class='dropdown-item' href='#' id='multi-part-order' title='{% trans "Order parts" %}'>
                        <span class='fas fa-shopping-cart'></span> {% trans "Order Parts" %}
                    </a></li>
                </ul>
            </div>
            {% include "filter_list.html" with id="parts" %}
        </div>
    </div>
    <div class='panel-content'>
        <table class='table table-striped table-condensed' data-toolbar='#part-button-toolbar' id='part-table'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-stock'>
    <div class='panel-heading'>
        <h4>{% trans "Stock Items" %}</h4>
    </div>
    <div class='panel-content'>
        {% include "stock_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-parameters'>
    <div class='panel-heading'>
        <h4>{% trans "Part Parameters" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='param-button-toolbar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="parameters" %}
            </div>
        </div>

        <table class='table table-striped table-condensed' data-toolbar='#param-button-toolbar' id='parametric-part-table'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-subcategories'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Subcategories" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.part_category.add %}
                <button class='btn btn-success' id='cat-create' title='{% trans "Create new part category" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Category" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='subcategory-button-toolbar'>
            <div class='btn-group' role='group'>
                {% include "filter_list.html" with id="category" %}
            </div>
        </div>

        <table class='table table-striped table-condensed' id='subcategory-table' data-toolbar='#subcategory-button-toolbar'></table>

    </div>
</div>

{% endblock %}

{% block js_load %}
{{ block.super }}
{% endblock %}

{% block js_ready %}
{{ block.super }}

    {% settings_value "STOCKTAKE_ENABLE" as stocktake_enable %}
    {% if stocktake_enable and roles.stocktake.add %}
    $('#category-stocktake').click(function() {
        generateStocktakeReport({
            category: {
                {% if category %}value: {{ category.pk }},{% endif %}
            },
            location: {},
            generate_report: {},
            update_parts: {},
        });
    });
    {% endif %}

    {% if category %}

    onPanelLoad('stock', function() {
        loadStockTable(
            $('#stock-table'),
            {
                params: {
                    category: {{ category.pk }},
                    part_detail: true,
                    location_detail: true,
                    supplier_part_detail: true,
                }
            }
        );
    });

    onPanelLoad('parameters', function() {
        loadParametricPartTable(
            "#parametric-part-table",
            {
                category: {{ category.pk }},
            }
        );
    });

    $("#toggle-starred").click(function() {
        toggleStar({
            url: '{% url "api-part-category-detail" category.pk %}',
            button: '#category-star-icon'
        });
    });

    {% endif %}

    // Enable breadcrumb tree view
    enableBreadcrumbTree({
        label: 'category',
        url: '{% url "api-part-category-tree" %}',
        {% if category %}
        selected: {{ category.pk }},
        {% endif %}
        processNode: function(node) {
            node.text = node.name;
            node.href = `/part/category/${node.pk}/`;

            return node;
        },
        defaultIcon: global_settings.PART_CATEGORY_DEFAULT_ICON,
    });

    onPanelLoad('subcategories', function() {
        loadPartCategoryTable(
            $('#subcategory-table'), {
                params: {
                    {% if category %}
                    parent: {{ category.pk }},
                    {% else %}
                    parent: null,
                    {% endif %}
                },
                allowTreeView: true,
            }
        );
    });

    $("#cat-create").click(function() {

        var fields = categoryFields();

        {% if category %}
        fields.parent.value = {{ category.pk }};
        {% endif %}

        constructForm('{% url "api-part-category-list" %}', {
            fields: fields,
            method: 'POST',
            title: '{% trans "Create Part Category" %}',
            follow: true,
        });
    });

    {% if roles.part.add %}
    $("#part-create").click(function() {
        createPart({
            {% if category %}category: {{ category.pk }},{% endif %}
        });
    });
    {% endif %}

    {% if category %}
    $("#cat-edit").click(function () {
        editCategory({{ category.pk }});
    });


    $('#cat-delete').click(function() {
        deletePartCategory({{ category.pk }}, {
            {% if category.parent %}
            redirect: "{% url 'category-detail' category.parent.id %}",
            {% else %}
            redirect: "{% url 'part-index' %}",
            {% endif %}
        });
    });

    {% endif %}

    onPanelLoad('parts', function() {
        loadPartTable(
            "#part-table",
            "{% url 'api-part-list' %}",
            {
                params: {
                    {% if category %}category: {{ category.id }},
                    {% else %}category: "null",
                    {% endif %}
                },
                checkbox: true,
                gridView: true,
            },
        );
    });

    // Enable left-hand navigation sidebar
    enableSidebar('category');

{% endblock %}
